<template>
  <base-breadcrumb>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <title-name title="审批信息"></title-name>
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-item
                  label="最后审批结果"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="form.opinions"  disabled></BaseInput>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item
                  label="最后审批时间"
                  :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="form.opinions"  disabled></BaseInput>
          </a-form-item>
        </a-col>
      </a-row>


      <title-name title="审批流程信息"></title-name>
      <a-table :columns="columnApprove" :data-source="approveInfos" bordered>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="action" slot-scope="text, record">
          <template>
           <a @click="handleDels(record)">查看</a>
          </template>
        </span>
      </a-table>
    </a-card>

    <a-modal width="900px" v-model="visibles">
      <template slot="footer">
        <a-button key="back" @click="handleCancels">
          关闭
        </a-button>
      </template>
      <a-row>
        <a-col :md="24" :sm="24">
          <a-form-item
                  label="审批意见"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseTextarea v-model="forms.branch" disabled/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="12">
          <a-form-item
                  label="审批人"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput v-model="forms.projectNum" type="text" disabled></BaseInput>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-item
                  label="审批时间"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput v-model="forms.projectNum" type="text" disabled></BaseInput>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="12">
          <a-form-item
                  label="节点名称"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput v-model="forms.projectNum" type="text" disabled></BaseInput>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-item
                  label="滞留时间"
                  :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                  :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }">
            <BaseInput v-model="forms.projectNum" type="text" disabled></BaseInput>
          </a-form-item>
        </a-col>
      </a-row>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
  import FooterToolBar from '@/components/FooterToolbar'
  import { getDesignType, getProjectsDel, editBranchInfo, getDepartConfig, addDepartmentConfig, getInstallationBranchId, getProjectTypes } from '@/api/project/projects'
  import { getProjectypesList } from '@/api/project/projectypes'
  import { getImportantsList } from '@/api/project/importants'
  import { getCustomerList, getCustomersOne } from '@/api/project/customers'

  const columnApprove = [
    {
      title: '审批序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '审批人',
      dataIndex: '',
    },
    {
      title: '审批时间',
      dataIndex: '',
    },
    {
      title: '节点名称',
      dataIndex: '',
    },
    {
      title: '滞留时间',
      dataIndex: '',
    },
    {
      title: '审批意见',
      dataIndex: '',
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' }
    },
  ]
  const columns = [
    {
      title: '序号',
      scopedSlots: { customRender: 'serial' }
    },
    {
      title: '岗位名称',
      dataIndex: 'jobName',
      width: '15%'
    },
    {
      title: '岗位人员姓名',
      width: '40%',
      scopedSlots: { customRender: 'employeeName' }
    },
    {
      title: '员工编号',
      scopedSlots: { customRender: 'employeeNum' }
    },
    {
      title: '状态',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' }
    }
  ]


  export default {
    name: 'StandardList',
    components: {
      FooterToolBar,
    },
    props: {
      text: String
    },
    data() {
      return {
        forms:{},

        visibles:false,
        columnApprove,
        approveInfos:[], // 审批流程信息

        visible: false,  // 人员配置调整

        projectNum: '',


        columns,

        dels:{},

      }
    },
    created() {

    },
    computed: {

    },
    methods: {

      handleDels(){
        this.visibles = true
      },

      handleCancels(){
        this.visibles = false
      },

    }
  }
</script>

<style lang="less" scoped>
  .wrapper-row {
    padding-left: 55px;
    font-weight: bold;
    letter-spacing: 1px;
  }

  /deep/ .ant-form-item label {
    font-size: 12px;
  }

  /deep/ .ant-btn {
    border-radius: 5px;
  }


  /deep/ .ant-input {
    /*width: 70%;*/
    border-radius: 5px;
  }



  /deep/ .ant-card.ant-card-bordered {
    border-radius: 5px;
  }

  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
      line-height: 20px;
    }
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
    padding-left: 80px;
  }
</style>

